<template>
<div class="logincontainer" style=" background:url('/loginBg.jpg') fixed no-repeat 0 0">
   <div class="loginbox">
    <h2>登录页</h2>
    <form action="">
      <div class="account">
        <span>账号:</span>
        <input type="text" id="accountInp" v-model="account" placeholder="请输入账号">
      </div>
      <div class="pwd">
        <span>密码:</span>
        <input type="password" id="pwdInp" v-model="pwd" placeholder="请输入密码">
      </div>
      <input type="submit" value="登录" id="loginbtn" @click.prevent="login">
    </form>
  </div>
</div>
 
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    name:'Login',
    data(){
      return {
        account:'',
        pwd:''
      }
    },
    methods:{
      ...mapMutations('login',['setUserInfo']),
      async login(){
        let userParams={user:this.account,pwd:this.pwd};
        let res=await this.$api.tryLogin(userParams);
        if(res.data.status===200){
          this.setUserInfo({user:this.account,token:res.data.token});
          this.$router.push('/home');
        }
      }
    }
}
</script>

<style lang="less" scoped>
.logincontainer{
  
  background-size:cover;  
  width:100vw;
  height:100vh
}
  .loginbox{
    position: fixed;
    top:50%;
    left:50%;
    padding:0 40px;
    border-radius: 10px;
    transform: translate(-50%,-50%);
    width: 500px;
    height:350px;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
    h2{
      text-align: center;
      font-size: 24px;
      line-height: 48px;
    }
    input{
      border:none;
      outline: none;
    }
    form div{
      margin-top:40px;
      height: 40px;
      border-bottom: 2px solid #434343;
      span{
        color:#000;
        font-size: 18px;
      }
      input{
        width: 82%;
        padding-left: 30px;
        height: 40px;
        font-size: 16px;
        color:#000;
        background-color: transparent;
      }
    }
    #loginbtn{
      // display: block;
      margin-top:40px;
      background-color: rgb(64, 158, 255);
      color:#000;
      width: 100%;
      font-size: 18px;
      height: 40px;
      &:hover{
        cursor: pointer;
      }

    }
  }
</style>